/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Dimensions,
    Platform,
    Image,
    ScrollView,
    TouchableOpacity,
    Animated,
    Easing,
    ListView,
    RefreshControl
} from 'react-native';

var width = Dimensions.get('window').width;
var height = Dimensions.get('window').height;
import Global from "../Commom/GlobalConst";
import HelpToBuyDetails from "../Pages/HelpToBuyDetails";
import QuestionDetailsPage from "../Pages/QuestionDetailsPage";
import TravelsDetails from "../Pages/TravelsDetails";

import ListHelpToBuyPage from '../Pages/ListHelpToBuyPage';
import ListWithTogetherPage from '../Pages/ListWithTogetherPage';
import ListQuestionAnswerPage from '../Pages/ListQuestionAnswerPage';
import ListTravelPage from '../Pages/ListTravelPage';
import Search from '../Components/Search';
import RuralAPIService from "../Commom/RuralAPIService";
import ImageViewer from "./ImageViewer";
import WithTogetherDetails from './WithTogetherDetails';
import ListStrategyPage from './ListStrategyPage';
import StrategyDetailPage from '../Components/StrategyDetailPage';
import DateUtil from "../Commom/DateUtil";
import Toast from '../Utils/toast';
export default class SearchFaXianPage extends Component {
    constructor(props) {
        super(props);
        var dataSourceData = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this. state = {
            dataSourceList: dataSourceData,
            label:['斗门村','斗门旅游','斗门古街一日游','金台寺寺庙','珠海斗门十里莲江','农家乐','珠海乡村旅游','斗门锁'],
            aboutWithImage:[{image:require('../../Image/new/image_01.png')},
                {image:require('../../Image/new/image_02.png')},
                {image:require('../../Image/new/image_03.png')}],
            isShow:false,
            rotateValue: new Animated.Value(0),//旋转角度的初始值
            data:[{type:1},{type:2},{type:3},{type:4},{type:5},{type:1},{type:2},{type:3},{type:4},{type:1},{type:5},{type:2},{type:3},{type:4}],
            record_count:1,
            page: 1,
            dataList:[],
            isRefreshing:false,
            search:'',
        }
    }

    componentDidMount() {
        this.state.rotateValue.setValue(0);
        if(this.props.search!=''){
            this.setState({
                search:this.props.search,
            });
            RuralAPIService.IndexList(this.props.search,1).then((ret)=> {
                this.setState({
                    dataList:ret.result,
                    page:ret.page,
                    record_count:ret.record_count,
                    isRefreshing: false,
                })
            }).catch((err)=> {

            });
        }

    }
    onRefreshData(){
        RuralAPIService.IndexList(this.state.search,1).then((ret)=> {
            this.setState({
                dataList:ret.result,
                page:ret.page,
                record_count:ret.record_count,
                isRefreshing: false,
            })
        }).catch((err)=> {
        });
    }
    loadMoreData(){
        if (this.state.page < this.state.record_count) {
            this.setState({
                isRefreshing: true,
            });
            RuralAPIService.IndexList(this.state.search,this.state.page + 1).then((ret)=> {
                this.setState({
                    dataList:this.state.dataList.concat(ret.result),
                    page:ret.page,
                    record_count:ret.record_count,
                    isRefreshing: false,
                })
            }).catch((err)=> {
            });
        } else {
            if (this.state.page != 1) {
                Toast.show('木有更多数据');
            }
        }
    }
    viewPagerItemClick(images){
        this.props.navigator.push({
            name: 'ImageViewer',
            component: ImageViewer,
            passProps: {
                source: images,
            }
        })
    }
    goHelpToBuy(id){
        this.props.navigator.push({
            id: 'HelpToBuyDetails',
            component: HelpToBuyDetails,
            passProps: {
                ID:id
            }
        });
    }
    goAboutWith(id){
        this.props.navigator.push({
            id: 'WithTogetherDetails',
            component: WithTogetherDetails,
            passProps: {
                ID:id
            }
        });
    }
    travelDetail(id){
        this.props.navigator.push({
            id: 'TravelsDetails',
            component: TravelsDetails,
            passProps: {
                ID:id
            }
        });
    }
    goQA(id){
        this.props.navigator.push({
            id: 'QuestionDetailsPage',
            component: QuestionDetailsPage,
            passProps: {
                ID:id
            }
        });
    }
    goStrategyPage(id){
        this.props.navigator.push({
            id: 'StrategyDetailPage',
            component: StrategyDetailPage,
            passProps: {
                ID:id
            }
        });
    }
    labelBackGroundColor(index){
        var color='';
        switch (index){
            case 0:
                color='#F8F2FF';
                break;
            case 1:
                color='#E6E6FC';
                break;
            case 2:
                color='#FDEDF1';
                break;
            case 3:
                color='#FFF7EE';
                break;
            case 4:
                color='#FDEDF1';
                break;
            case 5:
                color='#FFF7EE';
                break;
            case 6:
                color='#EBFBF0';
                break;
            case 7:
                color='#E6E6FC';
                break;

        }
        return color;
    }

    goList(id){
        switch (id) {
            case 0:
                this.props.navigator.push({
                    id: 'ListHelpToBuyPage',
                    component: ListHelpToBuyPage,
                    passProps: {},
                });
                break;
            case 1:
                this.props.navigator.push({
                    id: 'ListWithTogetherPage',
                    component: ListWithTogetherPage,
                    passProps: {},
                });
                break;
            case 2:
                this.props.navigator.push({
                    id: 'ListTravelPage',
                    component: ListTravelPage,
                    passProps: {},
                });
                break;
            case 3:
                this.props.navigator.push({
                    id: 'ListQuestionAnswerPage',
                    component: ListQuestionAnswerPage,
                    passProps: {},
                });
                break;
            case 4:
                this.props.navigator.push({
                    id: 'ListStrategyPage',
                    component: ListStrategyPage,
                });
                break;
        }
    }

    allRow(rowData, sectionId, rowId){
        if(rowData.type_id==2){
            let time = DateUtil.dateStr(rowData.time);
            return(
                <View style={{backgroundColor:'white',marginTop:10}}>
                    <View style={{flexDirection:'row',height:55,width,justifyContent:'space-between',alignItems:'center',backgroundColor:'white',marginTop:8}}>
                        <View style={{flexDirection:'row',alignItems:'center'}}>
                            <Image style={{width:30,height:30,borderRadius:15,marginLeft:10,marginRight:5}}
                                   source={{uri:rowData.author_image}}
                            />
                            <Text >{rowData.author_name}</Text>
                        </View>
                        <Text style={{marginRight:10}}>{time}</Text>
                    </View>
                    <Text numberOfLines={3} style={{marginLeft:10,width:width-20,lineHeight:24,color:'black'}}>{rowData.content}</Text>
                    {rowData.images.length>0?
                        <View style={{width:width-10,marginLeft:5,flexDirection:'row',flexWrap: 'wrap',marginTop:10}}>
                            {rowData.images.map((item, index) => {
                                return(
                                    <TouchableOpacity  style={{width:(width-30)/3,height:120,marginLeft:5,marginBottom:5}}  key={'row' + index} onPress={() => this.viewPagerItemClick(rowData.images)}>
                                        <Image
                                            key={'row' + index}
                                            style={{width:(width-30)/3,height:120,resizeMode:'cover'}}  source={{uri:item}}/>
                                    </TouchableOpacity>
                                )
                            })}
                        </View>:null}
                    <View style={{flexDirection:'row',height:55,width,justifyContent:'space-between',alignItems:'center',backgroundColor:'white',marginTop:8}}>
                        <View style={{flexDirection:'row',alignItems:'center'}}>
                            <Image style={{width:18,height:18,marginLeft:10,marginRight:8,resizeMode:'contain'}}
                                   source={require('../../Image/new/icon_gastronomy_02.png')}
                            />
                            <Text >帮购</Text>
                        </View>
                        <TouchableOpacity activeOpacity={0.5}
                                          onPress={()=>  this.goHelpToBuy(rowData.id)}>
                            <View style={{width:60,height:24,justifyContent:'center',alignItems:'center',marginRight:10,borderRadius:3,backgroundColor:'#24CD78'}}>
                                <Text style={{color:'white',fontSize:12}}>帮我买</Text>
                            </View>
                        </TouchableOpacity>
                    </View>
                </View>
            )
        }else if(rowData.type_id==0){
            let time = DateUtil.dateStr(rowData.time);
            return(
                <View style={{backgroundColor:'white',marginTop:10}}>
                    <View style={{flexDirection:'row',height:55,width,justifyContent:'space-between',alignItems:'center',backgroundColor:'white',marginTop:8}}>
                        <View style={{flexDirection:'row',alignItems:'center'}}>
                            <Image style={{width:30,height:30,borderRadius:15,marginLeft:10,marginRight:5}}
                                   source={{uri:rowData.author_image}}
                            />
                            <Text >{rowData.author_name}</Text>
                        </View>
                        <Text style={{marginRight:10}}>{time}</Text>
                    </View>
                    <Text numberOfLines={3} style={{marginLeft:10,width:width-20,lineHeight:24,color:'black'}}>{rowData.content}</Text>
                    {rowData.images.length>0?
                        <View style={{width:width-10,marginLeft:5,flexDirection:'row',flexWrap: 'wrap',marginTop:10}}>
                            {rowData.images.map((item, index) => {
                                return(
                                    <TouchableOpacity  style={{width:(width-30)/3,height:120,marginLeft:5,marginBottom:5}}  key={'row' + index} onPress={() => this.viewPagerItemClick(rowData.images)}>
                                        <Image
                                            key={'row' + index}
                                            style={{width:(width-30)/3,height:120,resizeMode:'cover'}}  source={{uri:item}}/>
                                    </TouchableOpacity>
                                )
                            })}
                        </View>:null}
                    <View style={{flexDirection:'row',height:55,width,justifyContent:'space-between',alignItems:'center',backgroundColor:'white',marginTop:8}}>
                        <View style={{flexDirection:'row',alignItems:'center'}}>
                            <Image style={{width:18,height:18,marginLeft:10,marginRight:8,resizeMode:'contain'}}
                                   source={require('../../Image/new/image_car.png')}
                            />
                            <Text >自驾约伴</Text>
                        </View>
                        <TouchableOpacity activeOpacity={0.5}
                                          onPress={()=>  this.goAboutWith(rowData.id)}>
                            <View style={{width:60,height:24,justifyContent:'center',alignItems:'center',marginRight:10,borderRadius:3,backgroundColor:'#24CD78'}}>
                                <Text style={{color:'white',fontSize:12}}>参加</Text>
                            </View>
                        </TouchableOpacity>
                    </View>
                </View>
            )
        }else if(rowData.type_id==3){
            // let time = DateUtil.dateStr(rowData.time);
            // return(
            //     <TouchableOpacity activeOpacity={0.5}
            //                       onPress={()=>  this.travelDetail(rowData.id)}>
            //         <View style={{backgroundColor:'white',marginTop:10}}>
            //             <View style={{flexDirection:'row',height:55,width,justifyContent:'space-between',alignItems:'center',backgroundColor:'white'}}>
            //                 <View style={{flexDirection:'row',alignItems:'center'}}>
            //                     <View style={{width:6,height:6,backgroundColor:'#24CD78',borderRadius:3,marginLeft:10,marginRight:5}}/>
            //                     <Text >游记</Text>
            //                 </View>
            //             </View>
            //             <View style={{ backgroundColor: 'white',paddingLeft: 10,paddingRight:10,paddingBottom:10,flexDirection: 'row',alignItems: 'center'}}>
            //                 {rowData.images.length>0?
            //                     <Image style={{width:120,height: 90,marginRight: 10,}} source={{uri:rowData.images[0]}}/>:null}
            //                 <View style={{width:width-140,height: 90}}>
            //                     <Text numberOfLines={2} style={{fontSize: 15,color: Global.FontColor.DimGray,lineHeight: 20,height: 45,marginTop:2}}>{rowData.content}</Text>
            //                     <Text numberOfLines={1} style={{position: 'absolute',left:0,bottom:2,fontSize: 13,color: Global.FontColor.LightGrey}}>{time}</Text>
            //                 </View>
            //             </View>
            //         </View>
            //     </TouchableOpacity>
            // )

            let time = DateUtil.dateStr(rowData.time);
            return(
                <View style={{backgroundColor:'white',marginTop:10}}>
                    <View style={{flexDirection:'row',height:55,width,justifyContent:'space-between',alignItems:'center',backgroundColor:'white',marginTop:8}}>
                        <View style={{flexDirection:'row',alignItems:'center'}}>
                            <Image style={{width:30,height:30,borderRadius:15,marginLeft:10,marginRight:5}}
                                   source={{uri:rowData.author_image}}
                            />
                            <Text >{rowData.author_name}</Text>
                        </View>
                        <Text style={{marginRight:10}}>{time}</Text>
                    </View>
                    <Text numberOfLines={3} style={{marginLeft:10,width:width-20,lineHeight:24,color:'black'}}>{rowData.content}</Text>
                    {rowData.images.length>0?
                        <View style={{width:width-10,marginLeft:5,flexDirection:'row',flexWrap: 'wrap',marginTop:10}}>
                            {rowData.images.map((item, index) => {
                                return(
                                    <TouchableOpacity  style={{width:(width-30)/3,height:120,marginLeft:5,marginBottom:5}}  key={'row' + index} onPress={() => this.viewPagerItemClick(rowData.images)}>
                                        <Image
                                            key={'row' + index}
                                            style={{width:(width-30)/3,height:120,resizeMode:'cover'}}  source={{uri:item}}/>
                                    </TouchableOpacity>
                                )
                            })}
                        </View>:null}
                    <View style={{flexDirection:'row',height:55,width,justifyContent:'space-between',alignItems:'center',backgroundColor:'white',marginTop:8}}>
                        <View style={{flexDirection:'row',alignItems:'center'}}>
                            <Image style={{width:18,height:18,marginLeft:10,marginRight:8,resizeMode:'contain'}}
                                   source={require('../../Image/new/image_car.png')}
                            />
                            <Text >游记</Text>
                        </View>
                        <TouchableOpacity activeOpacity={0.5}
                                          onPress={()=>  this.travelDetail(rowData.id)}>
                            <View style={{width:60,height:24,justifyContent:'center',alignItems:'center',marginRight:10,borderRadius:3,backgroundColor:'#24CD78'}}>
                                <Text style={{color:'white',fontSize:12}}>查看详情</Text>
                            </View>
                        </TouchableOpacity>
                    </View>
                </View>
            )
        }else if(rowData.type_id==1){
            let time = DateUtil.dateStr(rowData.time);
            return(
                <TouchableOpacity activeOpacity={0.5}
                                  onPress={()=>this.goQA(rowData.id)}>
                    <View style={{backgroundColor:'white',marginTop:10}}>
                        <View style={{flexDirection:'row',height:55,width,justifyContent:'space-between',alignItems:'center',backgroundColor:'white',marginTop:8}}>
                            <View style={{flexDirection:'row',alignItems:'center'}}>
                                <Image style={{width:30,height:30,borderRadius:15,marginLeft:10,marginRight:5}}
                                       source={{uri:rowData.author_image}}
                                />
                                <Text >{rowData.author_name}</Text>
                            </View>
                            <Text style={{marginRight:10}}>{time}</Text>
                        </View>
                        <Text numberOfLines={3} style={{marginLeft:10,width:width-20,lineHeight:24,color:'black'}}>{rowData.content}
                        </Text>
                        <View style={{flexDirection:'row',height:55,width,justifyContent:'space-between',alignItems:'center',backgroundColor:'white',marginTop:8}}>
                            <View style={{flexDirection:'row',alignItems:'center'}}>
                                <Image style={{width:18,height:18,marginLeft:10,marginRight:8,resizeMode:'contain'}}
                                       source={require('../../Image/new/icon_ask.png')}
                                />
                                <Text >有问必答</Text>
                            </View>
                            <TouchableOpacity activeOpacity={0.5}
                                              onPress={()=>this.goQA(rowData.id)}>
                                <View style={{width:60,height:24,justifyContent:'center',alignItems:'center',marginRight:10,borderRadius:3,backgroundColor:'#F2B94C'}}>
                                    <Text style={{color:'white',fontSize:12}}>有赏问答</Text>
                                </View>
                            </TouchableOpacity>
                        </View>
                    </View>
                </TouchableOpacity>
            )
        }else if(rowData.type_id==6){
            return(
                <View style={{backgroundColor:'white',marginTop:10}}>
                    <View style={{flexDirection:'row',height:55,width,justifyContent:'space-between',alignItems:'center',backgroundColor:'white'}}>
                        <View style={{flexDirection:'row',alignItems:'center'}}>
                            <View style={{width:6,height:6,backgroundColor:'#24CD78',borderRadius:3,marginLeft:10,marginRight:5}}/>
                            <Text >推荐攻略</Text>
                        </View>
                        <TouchableOpacity activeOpacity={0.5}
                                          onPress={()=>this.goList(4)}>
                            <View style={{flexDirection:'row',alignItems:'center'}}>
                                <Text style={{marginBottom:1}}>更多</Text>
                                <Image style={{width:10,height:13,resizeMode:'contain',marginLeft:5,marginRight:8}}
                                       source={require('../../Image/icon_go.png')}/>
                            </View>
                        </TouchableOpacity>
                    </View>
                    <TouchableOpacity activeOpacity={0.5}
                                      onPress={()=>this.goStrategyPage(rowData.id)}>
                        <View style={{width:width-20,height:180,marginLeft:10,borderRadius:5,marginBottom:5}}>
                            <Image style={{width:width-20,height:180,resizeMode:'cover',borderRadius:5}}
                                   source={{uri:rowData.image}}/>
                            <View style={{position: 'absolute',left:0,bottom:0,backgroundColor:'rgba(0,0,0,0.5)',width:width-20,height:30,justifyContent:'center',borderBottomLeftRadius:5,borderBottomRightRadius:5}}>
                                <Text style={{color:'white',marginLeft:8}}>{rowData.title}</Text>
                            </View>
                        </View>
                    </TouchableOpacity>
                </View>
            )
        }else{
            return null;
        }
    }
    onSearch(search){
        this.setState({
            search:search
        });
        RuralAPIService.IndexList(search,1).then((ret)=> {
            this.setState({
                dataList:ret.result,
                page:ret.page,
                record_count:ret.record_count,
                isRefreshing: false,
            })
        }).catch((err)=> {
            this.setState({
                dataList:[],
                page:1,
                record_count:1,
                isRefreshing: false,
            })
        });
    }
    BackAction() {
        this.props.navigator.pop();
    }
    render() {
        return (
            <View style={styles.container}>
                <View style={{flexDirection:'row',width,height:64,paddingTop:24,backgroundColor:'#24CD78',alignItems:'center'}}>
                    <TouchableOpacity activeOpacity={0.5}
                                      onPress={()=>this.BackAction()}>
                        <Image style={{width:16,height:16,marginLeft:10,marginRight:10,resizeMode:'contain'}}
                               source={require('../../Image/back_icon_white.png')}
                        />
                    </TouchableOpacity>
                    <View style={{ width:width-35,height:40,backgroundColor: 'white',}}>
                        <Search
                            ref="search_box"
                            backgroundColor={'#24CD78'}
                            contentWidth={width-36}
                            middleWidth={(width-36)/2}
                            positionRightDelete={55}
                            cancelButtonWidth={50}
                            placeholder={'搜索'}
                            keyword={this.props.search}
                            cancelTitle={'取消'}
                            onSearch={(search)=>this.onSearch(search)}
                        />
                    </View>
                </View>
                <ListView
                    refreshControl={
                        <RefreshControl
                            refreshing={this.state.isRefreshing}
                            onRefresh={() => {this.onRefreshData()}}
                            colors={['#4CAF50', '#4CAF50', '#4CAF50', '#4CAF50']}
                            progressBackgroundColor="white"
                        /> }
                    onEndReached={() => {this.loadMoreData()}}
                    enableEmptySections={true}
                    dataSource={this.state.dataSourceList.cloneWithRows(this.state.dataList)}
                    renderRow={(rowData, sectionId, rowId) => this.allRow(rowData, sectionId, rowId)}/>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex:1,
        backgroundColor: Global.Const.transparent,
    },
});

